// 右键菜单组件
import React, { useState, useEffect } from 'react';
import { connect } from "react-redux";
import { Button } from 'antd';
import { setCurrComp, setComponent, setIsClickComponent, setMenuShow } from '@/store/actions/visualdrag';

const Pages = ({ curComponentIndex, componentData, menuStyle, dispatch }) => {
  // 点击菜单时不取消当前组件的选中状态
  const handleMouseUp = (e) => {
    e.stopPropagation()
    dispatch(setIsClickComponent(true));
  }

  // 删除选中组件
  const deleteSelComp = () => {
    let data = componentData;
    let index = 0;
    componentData.map((mm, idx) => {
      if (mm.id == curComponentIndex) {
        index = idx;
      }
    })
    data.splice(index, 1)
    dispatch(setComponent(data));
    dispatch(setCurrComp({
      index: null,
      component: null
    }));
    dispatch(setMenuShow(false));
  }

  return (
    <div style={{ position: 'absolute', ...menuStyle }}
      onMouseUp={(e)=>handleMouseUp(e)}>
      <Button style={{ width: '80px' }}
        onClick={() => deleteSelComp()}>删除</Button>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    ...state.VisualDrag
  };
};

export default connect(mapStateToProps)(Pages);